<template>
    <div class="luckcode">

        <div class="goods_list">
            <ul ref="goodsul">
                <li ref="goodsli" class="goodsli" v-for="item in goods_list" :key="item.id">
                <img class="goods_img" :src="item.img" alt="">
                <div class="goods_text">
                    <p class="goods_name">{{item.name}}</p>
                    <p class="goods_word">{{item.title}}</p>
                    <p>满1000人就开奖！</p>
                    <div class="goods_join">

                    <router-link to="/GoodsData" class="btn" > 查看详情</router-link>
                    </div>
                </div>
                </li>

            </ul>
        </div>

        <div class="lucknum">
             <p>您参加本次抽奖的幸运码为：</p>
             <ul>
                 <li v-for="item in 9" :key="item.id">30002582</li>
             </ul>

        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      goods_list: [
        {
          id: 1,
          name: "小米8 青春版 4GB+64GB",
          img: "https://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg",
          title: "潮流镜面渐变色，2400万自拍旗舰"
        }
      ]
    };
  }
};
</script>

<style scoped lang="less">
@import "../style/base.less";

.luckcode {
  .goods_list {
    background: #fff;
    ul {
      padding: 24 / @px;
      padding-bottom: 0;
      padding-top: 0;
      li {
        padding-bottom: 24 / @px;
        padding-top: 24 / @px;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        justify-content: center;
        // align-items: center;
        padding-bottom: 24 / @px;
        .goods_img {
          width: 180 / @px;
          height: 180 / @px;
        }
        .goods_text {
          color: #666;
          flex: 1;
          margin-left: 25 / @px;
          overflow: hidden;
          .goods_name {
            font-size: 30 / @px;
            color: #1a1a1a;
          }
          .goods_word {
            margin-top: 10 / @px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 26 / @px;
            color: #666;
          }

          .goods_join {
            margin-top: 18 / @px;
            font-size: 24 / @px; // margin-top: 26/@px;
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            .gold {
              float: left;
              p:first-child {
                font-size: 36 / @px;
                color: #ff0032;
              }
            }
            .btn {
              float: right;
              text-align: center;
              padding: 12 / @px 14 / @px;
              background: #ffdb4f;
              border-radius: 10 / @px;
              //   line-height: 60 / @px;
              font-size: 28 / @px;
              color: #1a1a1a;
            }
          }
        }
      }
    }
  }

  .lucknum {
    padding: 36 / @px 24 / @px 70 / @px;
    background: #fff;
    p {
      font-size: 30 / @px;
      color: #1a1a1a;
    }

    ul {
      margin-top: 28 / @px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        flex: 0 0 33.3333%;
        font-size: 42 / @px;     
        color: #ff0032;
        margin-bottom:10/@px;
      }
    }
  }
}
</style>